<template>
  <el-dialog
    :title="title"
    :visible.sync="addVisible"
    width="500px"
    :before-close="cancel"
    append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item prop="buildingId" label="选择楼宇">
        <el-select v-model="form.buildingId" placeholder="请选择楼宇" clearable>
          <el-option
            v-for="item in buildingOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item prop="unitId" label="选择单元">
        <el-select v-model="form.unitId" placeholder="请选择单元" clearable>
          <el-option
            v-for="item in nowUnitsOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="楼层" prop="num">
        <el-input v-model="form.num" placeholder="请输入楼层" />
      </el-form-item>
      <el-form-item label="楼层名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入楼层名称" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>

import {addFloors, listFloors, updateFloors} from "../../../api/system/floors";
import {buildingList, listBuilding} from "../../../api/system/building";
import {listUnit, unitList} from "../../../api/system/unit";

export default {
  name:"addAndUpdate",
  data(){
    return {
      addVisible: false,
      // 表单校验
      rules: {
        num: [
          { required: true, message: "楼层数不能为空", trigger: "blur" }
        ],
        name: [
          { required: true, message: "楼层名称不能为空", trigger: "blur" }
        ],
      },
      // 楼宇数据
      buildingOptions:[],
      // 单元数据
      unitOptions: [],
      queryParams: {}
    }
  },
  props:{
    title:{
      type:String,
      required: true
    },
    visible: {
      type: Boolean,
      required: true
    },
    form: {
      type: Object,
      required: true
    },
    getList: {
      type:Function,
      required: true
    },
    reset:{
      type: Function,
      required: true
    }
  },
  watch:{
    visible(n){
      this.addVisible = n
    }
  },
  created() {

  },
  computed: {
    nowUnitsOptions() {
      return this.unitOptions.filter(item =>
        this.form.buildingId === item.buildingId
      )
    },
  },
  mounted() {
    buildingList(this.queryParams).then(res => {
      this.buildingOptions = res.rows
      console.log(this.buildingOptions)
    })
    unitList(this.queryParams).then(res => {
      this.unitOptions = res.rows
    })
    // 监听页面滚动事件
    window.addEventListener("scroll", this.scrolling);

  },
  methods: {
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateFloors(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.$emit("update:visible", false)
              this.getList();
            });
          } else {
            console.log(this.form)
            addFloors(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.$emit("update:visible", false)
              this.getList();
            });
          }
        }
      });
    },
    // 取消按钮
    cancel() {
      this.$emit("update:visible", false)
      this.reset();
    },
    scrolling() {
      // 滚动条距文档顶部的距离
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      // 滚动条滚动的距离
      let scrollStep = scrollTop - this.oldScrollTop;
      console.log("header 滚动距离 ", scrollTop);
      // 更新——滚动前，滚动条距文档顶部的距离
      this.oldScrollTop = scrollTop;

      //变量windowHeight是可视区的高度
      let windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      //变量scrollHeight是滚动条的总高度
      let scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;

      //滚动条到底部的条件
      if (scrollTop + windowHeight === scrollHeight) {
        //你想做的事情
        console.log("header  你已经到底部了");
      }
      if (scrollStep < 0) {
        console.log("header 滚动条向上滚动了！");
      } else {
        console.log("header  滚动条向下滚动了！");
      }
      // 判断是否到了最顶部
      if (scrollTop <= 0) {
        console.log("header 到了最顶部")
      }
    },
  }
}
</script>
